<template>
  <el-popover
    popper-class="avatar-popover"
    placement="top"
    width="280"
    trigger="hover"
  >
    <div class="popover-container">
      <div class="user-info">
        <div class="avatar-mid"><img :src="avatar" /></div>
        <div class="info">
          <div>{{ userName }}</div>
          <div><img src="@/assets/image/navMenu/authn-true.png" /></div>
          <div>{{ userDept }}</div>
          <div>{{ userTypeName }}</div>
        </div>
      </div>
      <div class="button-group">
        <div class="button" @click="goPersonalCenter()">
          <img src="@/assets/image/navMenu/personal-center.png" />
          <div>个人中心</div>
        </div>
        <div class="button" v-if="userType === 3" @click="jumpToManage">
          <img
            src="@/assets/image/navMenu/manager-system.png"
          />
          <div>管理系统</div>
        </div>
        <div class="empty" v-else></div>
        <div class="button" @click="logout()">
          <img src="@/assets/image/navMenu/exit.png" />
          <div>退出登录</div>
        </div>
      </div>
    </div>
    <div class="avatar" slot="reference">
      <img :src="avatar" />
    </div>
  </el-popover>
</template>

<script>
export default {
  props: {
    userName: { require: true, type: String },
    avatar: { require: true, type: String },
    userDept: { require: true, type: String },
    userType: { require: true, type: Number },
    userTypeName: { require: true, type: String },
  },
  methods: {
    jumpToManage() {
      this.$router.push("/manage");
    },
    goPersonalCenter() {
      this.$router.push("/pageMyself");
    },
    logout() {
      localStorage.removeItem("userId");
      localStorage.removeItem("avatar");
      localStorage.removeItem("userName");
      localStorage.removeItem("userType");
      localStorage.removeItem("deptName");
      this.$router.push("/");
    },
  },
};
</script>

<style scoped>
.avatar {
  cursor: pointer;
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
.avatar > img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}
.popover-container {
  height: 160px;
  width: 280px;
}
.user-info {
  width: 280px;
  height: 80px;
  padding-top: 4px;
  padding-left: 32px;
  display: flex;
}
.avatar-mid {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin-top: 8px;
  margin-right: 16px;
}
.avatar-mid > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.info {
  width: 160px;
  height: 56px;
  display: flex;
  background-color: #fff;
  flex-wrap: wrap;
  align-items: center;
}
.info > div {
  width: 80px;
  height: 40%;
  line-height: 36px;
  font-weight: bold;
}
.info img {
  height: 70%;
  width: 48px;
}
.button-group {
  display: flex;
  height: 80px;
  width: 280px;
  justify-content: center;
  align-items: top;
  box-sizing: border-box;
}
.button {
  cursor: pointer;
  width: 64px;
  height: 64px;
  margin-left: 10px;
  margin-right: 10px;
}
.button:hover {
  color: #7dc5eb;
}
.button > img {
  width: 40px;
  height: 40px;
  margin-left: 12px;
}
.button > div {
  width: 64px;
  height: 24px;
  font-size: 12px;
  text-align: center;
}
.empty {
  width: 32px;
}
</style>
<style>
.el-popover.avatar-popover {
  background-color: white;
  margin-top: 12px;
  padding: 0;
}
</style>
